<!--
 * @Description: WAN侧端口
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-08-18 11:15:44
 * @LastEditTime: 2021-11-11 16:19:06
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <el-dialog
    :title="title + '设备端口'"
    @close="cancel"
    :close-on-click-modal="false"
    width="500px"
    :visible.sync="wanStatus"
  >
    <el-form ref="ruleForm" :model="form" label-width="100px">
      <el-form-item
        label="类型"
        prop="type"
        key="type"
        :rules="[{ required: true, message: '请选择端口类型', trigger: 'change'}]"
      >
        <el-select v-model="form.type" :disabled="title === '编辑'" style="width: 100%;">
          <template v-if="site.ha">
            <el-option value="网关1-WAN" label="网关1-WAN">网关1-WAN</el-option>
            <el-option value="网关2-WAN" label="网关2-WAN">网关2-WAN</el-option>
            <el-option value="网关1-4G" label="网关1-4G" v-if="site.lte">网关1-4G</el-option>
            <el-option value="网关2-4G" label="网关2-4G" v-if="site.lte">网关2-4G</el-option>
          </template>
          <template v-else>
            <el-option value="WAN" label="WAN">WAN</el-option>
            <el-option value="4G" label="4G" v-if="site.lte">4G</el-option>
          </template>
        </el-select>
      </el-form-item>
      <template v-if="site.siteType !== 'POP'">
        <el-form-item
          label="端口"
          prop="port"
          key="port"
          v-if="form.type === 'WAN' || form.type === '网关1-WAN' || form.type === '网关2-WAN'"
          :rules="[{ required: true, message: '请选择端口', trigger: 'change'}]"
        >
          <el-cascader
            v-model="form.port"
            :options="wanOptions"
            style="width: 100%;"
            :disabled="title === '编辑'"
          ></el-cascader>
        </el-form-item>
      </template>
      <el-form-item
        label="线路类型"
        prop="lineType"
        key="lineType"
        :rules="[{ required: true, message: '请选择线路类型', trigger: 'change'}]"
      >
        <el-select v-model="form.lineType" style="width: 100%;">
          <el-option value="INTERNET" label="因特网"></el-option>
          <el-option value="LINE" label="专线"></el-option>
        </el-select>
      </el-form-item>
      <template v-if="form.type ? form.type.indexOf('WAN') > -1 : true">
        <el-form-item
          label="带宽"
          prop="bandwidth"
          key="bandwidth"
          :rules="[
            { required: true, message: '请输入带宽值', trigger: 'blur'},
            {  min: 1, max: 1000, type: 'number', message: '范围：1-1000'}
          ]"
        >
          <el-input v-model.number="form.bandwidth" placeholder="范围：1-1000">
            <template slot="append">Mbps</template>
          </el-input>
        </el-form-item>
        <el-form-item label="广域网优化" prop="enableWanOptimization" key="enableWanOptimization">
          <el-switch
            v-model="form.enableWanOptimization"
            :active-text="form.enableWanOptimization ? '开启' : '关闭'"
          ></el-switch>
        </el-form-item>
      </template>
      <el-form-item
        label="运营商"
        prop="compType"
        key="compType"
        :rules="[{ required: true, message: '请选择运营商', trigger: 'change'}]"
      >
        <el-select v-model="form.compType" style="width: 100%;">
          <el-option value="MOBILE" label="移动"></el-option>
          <el-option value="UNICOM" label="联通"></el-option>
          <el-option value="TELECOM" label="电信"></el-option>
          <el-option value="OTHER" label="其他"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="优先级" prop="priority" key="priority">
        <el-select
          v-model="form.priority"
          style="width: 100%;"
          :rules="[{ required: true, message: '请选择优先级', trigger: 'change'}]"
        >
          <el-option value="HIGH" label="高"></el-option>
          <el-option value="CENTER" label="普通"></el-option>
          <el-option value="LOW" label="低"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="获取方式"
        prop="getPathType"
        key="getPathType"
        :rules="[{ required: true, message: '请选择获取方式', trigger: 'change'}]"
      >
        <el-select
          v-model="form.getPathType"
          style="width: 100%;"
          :disabled="form.type === '4G' || form.type === '网关1-4G' || form.type === '网关2-4G' || site.siteType === 'POP'"
        >
          <el-option value="PPPOE" label="PPPOE"></el-option>
          <el-option value="DHCP" label="DHCP"></el-option>
          <el-option value="STATIC" label="STATIC"></el-option>
        </el-select>
      </el-form-item>
      <template v-if="form.getPathType === 'PPPOE'">
        <el-form-item
          label="用户名"
          prop="userName"
          key="userName"
          :rules="[{ required: true, message: '请输入用户名', trigger: 'blur'}]"
        >
          <el-input v-model.trim="form.userName" />
        </el-form-item>
        <el-form-item
          label="密码"
          prop="passWord"
          key="passWord"
          :rules="[{ required: true, message: '请输入密码', trigger: 'blur'}]"
        >
          <el-input v-model.trim="form.passWord" type="password" maxlength="14" />
        </el-form-item>
      </template>
      <template v-if="form.getPathType === 'STATIC'">
        <el-row>
          <el-col :span="19">
            <el-form-item
              label="地址/掩码"
              prop="ipAddress"
              key="ipAddress"
              :rules="[{ required: true, message: '不能为空', trigger: 'blur'}]"
            >
              <el-input v-model.trim="form.ipAddress" placeholder="IP地址" />
            </el-form-item>
          </el-col>
          <el-col :span="1" style="text-align: center; line-height:40px;">/</el-col>
          <el-col :span="4">
            <el-form-item
              label-width="0"
              prop="mask"
              key="mask"
              :rules="[{ required: true, message: '请输入掩码', trigger: 'blur'}]"
            >
              <el-input v-model.number="form.mask" placeholder="掩码" />
            </el-form-item>
          </el-col>
        </el-row>
        <template v-if="site.siteType !== 'POP'">
          <el-form-item
            label="网关地址"
            prop="wayAddress"
            key="wayAddress"
            :rules="[{ required: true, message: '不能为空', trigger: 'blur'}]"
          >
            <el-input v-model.trim="form.wayAddress" placeholder="IP地址" />
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item
            label="网关地址"
            prop="wayAddress"
            key="wayAddress"
            :rules="[{ required: true, message: '不能为空', trigger: 'blur'}]"
            v-if="site.localInternetAccess"
          >
            <el-input v-model.trim="form.wayAddress" placeholder="IP地址" />
          </el-form-item>
        </template>
      </template>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <!--取 消  确 定-->
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="onSubmit">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ['site', 'options', 'wanForm', 'wanIndex', 'wanStatus'],
  data () {
    return {
      title: '添加',
      form: {
        enableWanOptimization: false
      }
    };
  },
  computed: {
    wanOptions () {
      let arry = [];
      if (this.site.neType === 'ZXR10_230' || this.site.neType === 'ZXWT_ISG1800_2S') {
        arry = [{
          value: '0',
          label: '槽位0',
          children: [{
            value: '4',
            label: '端口4',
            children: [{
              value: 'gei-0/4',
              label: 'Port-0/4',
            }]
          }, {
            value: '5',
            label: '端口5',
            children: [{
              value: 'gei-0/5',
              label: 'Port-0/5',
            }]
          }, {
            value: '6',
            label: '端口6',
            children: [{
              value: 'gei-0/6',
              label: 'Port-0/6',
            }]
          }]
        }];
      }
      if (this.site.neType === 'ZXWT_ISG280') {
        arry = [{
          value: '0',
          label: '槽位0',
          children: [{
            value: '7',
            label: '端口7',
            children: [{
              value: 'gei-0/7',
              label: 'Port-0/7',
            }]
          }, {
            value: '8',
            label: '端口8',
            children: [{
              value: 'gei-0/8',
              label: 'Port-0/8',
            }]
          }]
        }];
      }
      if (this.site.neType === 'ZXR10_260' || this.site.neType === 'ZXWT_ISG') {
        arry = [{
          value: '0',
          label: '槽位0',
          children: [{
            value: '9',
            label: '端口9',
            children: [{
              value: 'gei-0/9',
              label: 'Port-0/9',
            }]
          }, {
            value: '10',
            label: '端口10',
            children: [{
              value: 'gei-0/10',
              label: 'Port-0/10',
            }]
          }, {
            value: '11',
            label: '端口11',
            children: [{
              value: 'gei-0/11',
              label: 'Port-0/11',
            }]
          }, {
            value: '12',
            label: '端口12',
            children: [{
              value: 'gei-0/12',
              label: 'Port-0/12',
            }]
          }]
        }];
      }
      if (this.site.neType === 'ZXWT_ISG6800_4E') {
        arry = [{
          value: '0',
          label: '槽位0',
          children: [{
            value: '3',
            label: '端口3',
            children: [{
              value: 'gei-0/3',
              label: 'Port-0/3',
            }]
          }, {
            value: '4',
            label: '端口4',
            children: [{
              value: 'gei-0/4',
              label: 'Port-0/4',
            }]
          }]
        }];
      }
      if (this.site.neType !== 'ZXR10_230' && this.site.neType !== 'ZXR10_260'
        && this.site.neType !== 'ZXWT_ISG' && this.site.neType !== 'ZXWT_ISG1800_2S'
        && this.site.neType !== 'ZXWT_ISG280' && this.site.neType !== 'ZXWT_ISG6800_4E') {
        arry = this.options;
      }
      return arry;
    }
  },
  watch: {
    wanStatus: {
      immediate: true,
      handler (val) {
        if (val) {
          if (this.wanIndex === null) {
            this.title = '添加';
            this.form = {
              type: 'WAN',
              port: null,
              lineType: 'INTERNET',
              bandwidth: 1000,
              compType: 'TELECOM',
              priority: 'CENTER',
              getPathType: 'DHCP',
              userName: null,
              passWord: null,
              ipAddress: null,
              mask: null,
              wayAddress: null,
              enableWanOptimization: false
            };
            if (this.site.ha) {
              this.form.type = '网关1-WAN';
            }
            if (this.site.siteType === 'POP') {
              this.form.getPathType = 'STATIC';
            }
          } else {
            this.title = '编辑';
            this.form = this.wanForm;
            this.form.bandwidth = Number(this.wanForm.bandwidth);
            this.form.mask = Number(this.wanForm.mask);
          }
        }
      }
    },
    'form.type': {
      immediate: true,
      handler (val) {
        if (val === '4G' || val === '网关1-4G' || val === '网关2-4G') {
          if (this.site.siteType !== 'POP') {
            this.form.getPathType = 'DHCP';
          } else {
            this.form.getPathType = 'STATIC';
          }
        }
      }
    }
  },
  methods: {
    // 判断输入是否符合
    // eslint-disable-next-line complexity
    validateForm () {
      let _this = this;
      let arry = [];
      if (_this.form.getPathType === 'STATIC') {
        if (_this.site.siteType !== 'POP') {
          let ip = _this.form.ipAddress;
          let wayIp = _this.form.wayAddress;
          if (ip.substr(0, ip.lastIndexOf('.')) !== wayIp.substr(0, wayIp.lastIndexOf('.'))) {
            arry.push('地址与网关地址不在同一网段！');
          } else {
            if (ip.substr(ip.lastIndexOf('.') + 1, ip.length) === wayIp.substr(wayIp.lastIndexOf('.') + 1, wayIp.length)) {
              arry.push('地址与网关地址不能相同！');
            }
          }
        } else {
          if (_this.site.localInternetAccess) {
            let ip = _this.form.ipAddress;
            let wayIp = _this.form.wayAddress;
            if (ip.substr(0, ip.lastIndexOf('.')) !== wayIp.substr(0, wayIp.lastIndexOf('.'))) {
              arry.push('地址与网关地址不在同一网段！');
            } else {
              if (ip.substr(ip.lastIndexOf('.') + 1, ip.length) === wayIp.substr(wayIp.lastIndexOf('.') + 1, wayIp.length)) {
                arry.push('地址与网关地址不能相同！');
              }
            }
          }
        }
      }
      return arry;
    },
    // 提交
    onSubmit () {
      let _this = this;
      _this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          let result = _this.validateForm();
          if (result.length === 0) {
            _this.cancel();
            if (_this.title === '添加') {
              if (_this.form.type === 'WAN' || _this.form.type === '网关1-WAN' || _this.form.type === '网关2-WAN') {
                if (_this.site.siteType === 'POP') {
                  _this.form.port = null;
                  // 判断本地上网
                  // eslint-disable-next-line max-depth
                  if (!_this.site.localInternetAccess) {
                    _this.form.wayAddress = null;
                  }
                }
                _this.$emit('addWanRow', _this.form);
              } else {
                _this.form.port = null;
                _this.form.bandwidth = null;
                _this.form.enableWanOptimization = false;
                _this.form.userName = null;
                _this.form.passWord = null;
                _this.form.ipAddress = null;
                _this.form.mask = null;
                _this.form.wayAddress = null;
                _this.$emit('addWanRow', _this.form);
              }
            } else {
              _this.$message.success('更新成功！');
            }
          } else {
            _this.$message.error(result[0]);
          }
        } else {
          _this.$message.error('请检查必填项！');
        }
      });
    },
    // 取消
    cancel () {
      let _this = this;
      _this.$emit('changeWanStatus', false);
    }
  }
};
</script>

<style>
</style>